<template>
  <div class="simple-mode-container">
    <!-- 上半部分：B04模型占50% -->
    <div class="top-section">
      <div class="b04-scene">
        <ThreeSceneB04 :alert-type="selectedAlertType" :alert-data="getAlertForLocation('b04')" />
      </div>
    </div>

    <!-- 下半部分：分成三个区域 -->
    <div class="bottom-section">
      <!-- 左侧：报警类型图例模块 -->
      <div class="legend-section">
        <div class="legend-header">抓拍报警类型</div>
        <div class="legend-content">
          <div 
            class="legend-item" 
            v-for="item in alertTypes" 
            :key="item.type"
            :class="{ active: selectedAlertType === item.type }"
            @click="selectAlertType(item.type)"
          >
            <span class="alert-icon">{{ item.icon }}</span>
            <span class="alert-label">{{ item.label }}</span>
          </div>
        </div>
      </div>

      <!-- 中间：C07模型模块 -->
      <div class="c07-section">
        <div class="section-header">C07车间</div>
        <div class="c07-scene">
          <ThreeSceneC07 :alert-type="selectedAlertType" :alert-data="getAlertForLocation('c07')" />
        </div>
      </div>

      <!-- 右侧：堆放场模型模块 -->
      <div class="storage-section">
        <div class="section-header">堆放场</div>
        <div class="storage-scene">
          <ThreeSceneStorage :alert-type="selectedAlertType" :alert-data="getAlertForLocation('storage')" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, computed } from 'vue'
import ThreeSceneB04 from './ThreeSceneB04.vue'
import ThreeSceneC07 from './ThreeSceneC07.vue'
import ThreeSceneStorage from './ThreeSceneStorage.vue'

const selectedAlertType = ref(null)

const alertTypes = reactive([
  { type: 'handrail', label: '扶手抓拍', color: '#ff6b6b', icon: '🚧' },
  { type: 'helmet', label: '安全帽检测', color: '#ffa500', icon: '⛑️' },
  { type: 'smoking', label: '吸烟检测', color: '#ff4757', icon: '🚬' },
  { type: 'phone', label: '手机使用检测', color: '#5f27cd', icon: '📱' },
  { type: 'leave_post', label: '离岗检测', color: '#ff6348', icon: '🚶' },
  { type: 'intrusion', label: '区域入侵检测', color: '#ff3838', icon: '⚠️' }
])

// 模拟报警数据
const alertData = reactive([
  { 
    type: 'handrail', 
    location: 'b04', 
    position: { x: -20, y: 15, z: 10 },
    message: '扶手抓拍',
    time: '2025-10-31 14:23:15',
    camera: '摄像头 #B04-05'
  },
  { 
    type: 'helmet', 
    location: 'b04', 
    position: { x: 15, y: 12, z: -15 },
    message: '未佩戴安全帽',
    time: '2025-10-31 14:25:32',
    camera: '摄像头 #B04-08'
  },
  { 
    type: 'smoking', 
    location: 'c07', 
    position: { x: -10, y: 14, z: 5 },
    message: '吸烟行为检测',
    time: '2025-10-31 14:20:08',
    camera: '摄像头 #C07-03'
  },
  { 
    type: 'phone', 
    location: 'c07', 
    position: { x: 20, y: 13, z: -10 },
    message: '作业期间使用手机',
    time: '2025-10-31 14:18:45',
    camera: '摄像头 #C07-07'
  },
  { 
    type: 'leave_post', 
    location: 'storage', 
    position: { x: 10, y: 10, z: 8 },
    message: '离岗检测',
    time: '2025-10-31 14:15:22',
    camera: '摄像头 #ST-04'
  },
  { 
    type: 'intrusion', 
    location: 'storage', 
    position: { x: -15, y: 9, z: -12 },
    message: '区域入侵检测',
    time: '2025-10-31 14:12:30',
    camera: '摄像头 #ST-06'
  }
])

const selectAlertType = (type) => {
  selectedAlertType.value = selectedAlertType.value === type ? null : type
}

const getAlertCount = (type) => {
  return alertData.filter(alert => alert.type === type).length
}

const getAlertForLocation = (location) => {
  if (!selectedAlertType.value) return null
  // 获取该位置和类型的最近一条报警
  const alerts = alertData
    .filter(alert => alert.type === selectedAlertType.value && alert.location === location)
    .sort((a, b) => new Date(b.time) - new Date(a.time))
  return alerts.length > 0 ? alerts[0] : null
}
</script>

<style scoped>
.simple-mode-container {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: 50% 50%;
  gap: 20px;
  padding-bottom: 20px;
  box-sizing: border-box;
}

.top-section {
  border-radius: 18px;
  border: 1px solid rgba(24, 118, 200, 0.35);
  background: rgba(5, 26, 48, 0.85);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.b04-scene {
  flex: 1;
  position: relative;
}

.bottom-section {
  display: grid;
  grid-template-columns: 300px 1fr 1fr;
  gap: 20px;
  height: 100%;
}

.legend-section,
.c07-section,
.storage-section {
  border-radius: 18px;
  border: 1px solid rgba(24, 118, 200, 0.35);
  background: rgba(5, 26, 48, 0.85);
  display: flex;
  flex-direction: column;
}

.legend-header,
.section-header {
  padding: 12px 16px;
  font-size: 16px;
  font-weight: 600;
  color: #ecf8ff;
  text-shadow: 0 0 15px rgba(90, 231, 255, 0.6);
  border-bottom: 1px solid rgba(24, 118, 200, 0.2);
}

.legend-content {
  flex: 1;
  padding: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-content: start;
}

.legend-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 8px;
  border-radius: 8px;
  background: rgba(12, 65, 112, 0.6);
  border: 1px solid rgba(41, 171, 255, 0.3);
  color: #d4efff;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
}

.legend-item:hover {
  background: rgba(12, 65, 112, 0.8);
  border-color: rgba(41, 171, 255, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(41, 171, 255, 0.2);
}

.legend-item.active {
  background: rgba(82, 224, 255, 0.2);
  border-color: rgba(82, 224, 255, 0.6);
  box-shadow: 0 0 12px rgba(82, 224, 255, 0.4);
}

.alert-icon {
  font-size: 24px;
  line-height: 1;
}

.alert-label {
  font-size: 12px;
  line-height: 1.2;
}

.c07-scene,
.storage-scene {
  flex: 1;
  position: relative;
}
</style>
